<ion-view>
  <ion-content class="home white">
    <div class="search hide">
      <label class="item item-input">
        <input type="text" placeholder="搜索课程,用户,话题" autofocus="true">
      </label>
    </div>
    <header>
      <video autoplay loop src="https://static1.gotokeep.com/homepage/5s.mp4"></video>
      <div  class="center">
        <img src="https://staticssl.keepcdn.com/show/images/homepage/slogan-cfd33df7dd.png" alt=""/>
      </div>
      <p>Keep • 自律给我自由 <br/>
        你的移动健身教练，随时随地练就完美身材</p>
    </header>

    <section>
      <article>
      <h2>量体裁衣 & 多种健身训练供你选择 </h2>
      <p>
        训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
      </p>
    </article>
      <div>
        <a class="background" style="background-image: url(https://staticssl.keepcdn.com/misc/2016/06/02/23/554474e4c9000000.jpg);">
          <h2>邹市明拳击燃脂</h2>
          <p>
            <span><num>21</num>分钟</span>
            <span><num>241</num>千卡</span>
          </p>
          <span><num>1751274</num>人训练</span>
        </a>
        <a class="background" style="background-image: url(https://staticssl.keepcdn.com/misc/2016/06/02/23/554474e4c9000000.jpg);">
          <h2>邹市明拳击燃脂</h2>
          <p>
            <span><num>21</num>分钟</span>
            <span><num>241</num>千卡</span>
          </p>
          <span><num>1751274</num>人训练</span>
        </a>
        <a class="background" style="background-image: url(https://staticssl.keepcdn.com/misc/2016/06/02/23/554474e4c9000000.jpg);">
          <h2>邹市明拳击燃脂</h2>
          <p>
            <span><num>21</num>分钟</span>
            <span><num>241</num>千卡</span>
          </p>
          <span><num>1751274</num>人训练</span>
        </a>
        <article class="btn_art">
          <h2>户外跑步 & 精准跑步记录 <br/>让你的跑步更加系统 </h2>
          <p>
            训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
          </p>
          <button><a href="#/tab/course">查看课程 <i class="keep-icon-more"></i></a></button>
        </article>
      </div>
    </section>

    <section class="chart">
      <div style="height: 420px;background-color: #ffffff"></div>
      <div style="height: 760px;background-image: url(http://staticssl.gotokeep.com/show/images/homepage/runbg-48ebfba6ba.jpg)"></div>
      <div class="chart_box">
      <article>
        <h2>我在图表上面 </h2>
        <p>
          训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
        </p>
      </article>
      <div class="div_chart" id="chart">
      <span><i class="keep-icon-speed"></i> 配速</span>
      <p>
      <span>公里</span>
      <span>配速</span>
      <span class="right">用时</span>
      </p>
      <ul>
      <li style="width: 54.6%"><div></div></li>
      <li style="width: 42%"><div></div></li>
      <li style="width: 45.4%"><div></div></li>
      <li><div id="less"></div></li>
      <li style="width: 48.9%"><div></div></li>
      <li style="width: 45.4%"><div></div></li>
      <li style="width: 50.6%"><div></div></li>
      </ul>
      </div>
      <div class="div_chart chart2">
      <span><i class="keep-icon-frequency"> </i> 步频</span>
      <span class="right">(步/分钟)</span>
      <p style="text-align: center;">
      <span>平均步频 <num class="green">146</num></span>
      </p>
      <div class="runcover"><img src="https://staticssl.keepcdn.com/show/images/homepage/runcover-84021e09f4.png" alt=""/></div>
      <div class="runchart"><img src="https://staticssl.keepcdn.com/show/images/homepage/runchart-ae8422d700.png" alt=""/></div>
      </div>
        <article class="btn_art">
          <h2>我在图表下面 </h2>
          <p>
            训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
          </p>
          <button><a href="">跑步轨迹 <i class="keep-icon-more"></i></a></button>
        </article>
      </div>
    </section>

    <section>
  <article>
      <h2>量体裁衣 & 多种健身训练供你选择 </h2>
      <p>
        训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
      </p>
    </article>
      <div class="bg background center y" style="background-image: url(http://staticssl.gotokeep.com/show/images/homepage/communitybg-sm-07813e09e8.jpg)">
        <article>
          <h2>量体裁衣 & 多种健身训练供你选择 </h2>
          <p>
            训练计划针对不同人群、各种器械和阶段健身目标组合编排，适用最广泛的健身场景。
          </p>
          <button><a href="#/tab/discover">社区精选 <i class="keep-icon-more"></i></a></button>
        </article>
        <img src="//staticssl.keepcdn.com/show/images/homepage/camera-e92b0dfd3d.png" alt=""/>
      </div>

    </section>

    <section class="now">
      <article>
        <h2>此刻在 Keep 运动 </h2>
        <p>
          每分每秒，都有来自全世界的 Keepers 在这里留下他们的汗水。
        </p>
      </article>
      <div>
        <ul class="user_list white">
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep1</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep2</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep3</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep4</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep5</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep6</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
          <li class="center user">
            <img src="https://staticssl.keepcdn.com/avatar/2016/01/04/15/123ef56eda66391ec83a8a0290fa813bc248c3c8.jpg?imageMogr2/thumbnail/96x" alt=""/>
            <p>
              <span>Keep7</span><br/>
              <span>刚刚完成了一字马横叉</span>
            </p>
          </li>
        </ul>
      </div>

    </section>



  </ion-content>
</ion-view>

